{extend name="public/base" /}
{block name="title"}文章管理{/block}
{block name="css"}
<link href="__PUBLIC__/static/inspinia/css/plugins/datapicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="__PUBLIC__/static/inspinia/css/plugins/dropzone/dropzone-4.3.0.min.css" rel="stylesheet">
<link href="__PUBLIC__/static/inspinia/css/plugins/chosen/chosen.css" rel="stylesheet">
<link href="__PUBLIC__/static/common/css/plugins/jquery.tagsinput.min.css" rel="stylesheet">
{/block}
{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>{$article ? '修改' : '新增'}文章</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <form class="form-horizontal ajax-form" action="{:url(request()->controller().'/'.request()->action())}" method="post">
                {present name="article"}
                <!--编辑-->
                <div class="form-group">
                    <label class="col-lg-2 control-label">所属分类<span class="text text-danger">*</span></label>
                    <div class="col-lg-10">
                        <select name="category_ids[]" tabindex="4" required="" placeholder="选择分类" class="form-control chosen-select form-control chosen-select-deselect chosen-select-no-single chosen-select-no-results chosen-select-search" multiple style="width:100%!important;" >
                            {volist name="categoryList" id="cl"}
                            <option value="{$cl.id}" {in name="cl.id" value="$oldCategoryIds"}selected{/in}>{$cl._name|raw}</option>
                            {/volist}
                        </select>
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>
                {else/}
                <div class="form-group">
                    <label class="col-lg-2 control-label">所属分类<span class="text text-danger">*</span></label>
                    <div class="col-lg-10">
                        <select data-placeholder="选择分类" tabindex="4" name="category_ids[]" class="form-control chosen-select form-control chosen-select-deselect chosen-select-no-single chosen-select-no-results chosen-select-search" multiple style="width:100%!important;">
                            {volist name="categoryList" id="cl"}
                            <option value="{$cl.id}">{$cl._name|raw}</option>
                            {/volist}
                        </select>
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>
                {/present}

                <div class="form-group">
                    <label class="col-lg-2 control-label" for="title">文章标题<span class="text text-danger">*</span></label>
                    <div class="col-lg-10">
                        <input class="form-control" type="text" id="title" name="title" placeholder="文章标题" value="{$article.title|default=''}" required>
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label" for="author">文章作者</label>
                    <div class="col-lg-10">
                        <input class="form-control" type="text" id="author" name="author" placeholder="文章作者" value="{$article.author|default=$myself['nickname']}">
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-2 control-label" for="keywords">关键词</label>
                    <div class="col-lg-10">
                        <input class="form-control" type="text" id="keywords" name="keywords" placeholder="关键词" value="{$article.keywords|default=''}">
                        <span class="help-block m-b-none">多个关键词以英文逗号(,)分隔</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">摘要</label>
                    <div class="col-lg-10">
                        <textarea class="form-control" name="description">{$article.description|default=''}</textarea>
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label" for="keywords">标签</label>
                    <div class="col-lg-10">
                        <input class="form-control" type="text" id="tags" name="tags" placeholder="添加标签" value="{$article ? implode(',',$article->metas('tag')) : ''}">
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">是否发布<span class="text text-danger">*</span></label>
                    <div class="col-lg-10">
                        <select class="form-control" name="status">
                            <option value="0" {present name="article"}{eq name="article.status" value="0"}selected{/eq}{/present}>存草稿</option>
                            <option value="5" {present name="article"}{neq name="article.status" value="0"}selected{/neq}{/present}>立即发布</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">缩略图</label>
                    <div class="col-lg-10">
                        <input type="hidden" name="thumb_image_id" id="thumb_image_id" value="{$article.thumb_image_id|default=''}">
                        {php}
                        $themeConfig = get_theme_config();
                        $articleThumbImage = $themeConfig['article_thumb_image'];
                        {/php}
                        <div class="dropzone needsclick dz-clickable" id="uploadImage" data-input-name="thumb_image_id" data-width="{$articleThumbImage.width}" data-height="{$articleThumbImage.height}"
                             data-thumb-width="{$articleThumbImage.thumb_width}" data-thumb-height="{$articleThumbImage.thumb_height}">
                            <div class="dz-message needsclick">
                                {if isset($article) && $article.thumb_image_id > 0}
                                <img src="{$article.thumb_image.full_image_url}" style="border:1px solid #ccc;{$articleThumbImage.thumb_width}px;height:{$articleThumbImage.thumb_height}px">
                                {else/}
                                点击此处上传文章缩略图 {$articleThumbImage.width}*{$articleThumbImage.height}<br>
                                <span class="note needsclick"></span>
                                {/if}
                            </div>
                        </div>
                        <span class="help-block m-b-none">文章缩略图 {$articleThumbImage.width}*{$articleThumbImage.height}</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label">内容<span class="text text-danger">*</span></label>
                    <div class="col-lg-10">
                        <script id="container" name="content" type="text/plain">{$article ? html_entity_decode($article['content']) : ''}</script>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-lg-offset-2 col-lg-10">
                        {present name="article"}
                        <input type="hidden" name="id" value="{$article.id}">
                        <input type="hidden" name="oldCategoryIds" value="{$oldCategoryIds|json_encode}">
                        {/present}
                        <button class="btn btn-primary btn-lg" type="submit" id="submitBtn">{$article ? '修改' : '新增'}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<!-- 日期 -->
<script src="__PUBLIC__/static/inspinia/js/plugins/datapicker/bootstrap-datetimepicker.min.js"></script>
<script src="__PUBLIC__/static/inspinia/js/plugins/datapicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 上传插件 -->
<script src="__PUBLIC__/static/inspinia/js/plugins/dropzone/dropzone-4.3.0.min.js"></script>

<!-- Chosen -->
<script src="__PUBLIC__/static/inspinia/js/plugins/chosen/chosen.jquery.js"></script>
<!-- tags input -->
<script src="__PUBLIC__/static/common/js/plugins/jquery.tagsinput.min.js"></script>

<!-- 引入ueditor的js代码 -->
<script src="__PUBLIC__/static/ueditor/ueditor.config.js?2017032702"></script>
<script src="__PUBLIC__/static/ueditor/ueditor.all.js?2017041701"></script>
<script>
    //ueditor代码
    var url="{:url('BaiduUeditor/index')}";
    var ue = UE.getEditor('container',{
      serverUrl :url,
      UEDITOR_HOME_URL:'__PUBLIC__/static/ueditor/',
      initialFrameHeight :600,
      autoHeightEnabled : true,
      maximumWords : 200000,
    });

    var config = {
        '.chosen-select'           : {},
        '.chosen-select-deselect'  : {allow_single_deselect:true},
        '.chosen-select-search'    : {search_contains:true},
        '.chosen-select-no-single' : {disable_search_threshold:10},
        '.chosen-select-no-results': {no_results_text:'没有匹配的选项'},
        '.chosen-select-width'     : {width:"100%!important"}
    };
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }

    $('#tags').tagsInput({
        'height': '48px',
        'width': '100%',
        'interactive': true,
        'defaultText': '添加标签',
        'delimiter': [','],
    });

    //日期选择
    $('.form-datetime').datetimepicker({
        locale: 'zh-cn',
        viewMode: 'days',
        format: 'YYYY-MM-DD HH:mm:ss',
    });

    //图片上传
    Dropzone.autoDiscover = false;
    $("#uploadImage").dropzone({
        url: "{:url('Image/upcrop')}",
        paramName: 'file', //input的name
        maxFilesize: 5, // MB
        addRemoveLinks: true, //添加删除链接
        clickable: true, //预览图可点击
        maxFiles: 1, //最多上传文件数量
        acceptedFiles: '.jpg,.gif,.png,.jpeg', //允许上传的文件后缀
        // thumbnailWidth: 320,
        // thumbnailheight: 200,
        dictCancelUpload: '取消上传',
        dictRemoveFile: '删除图片',
        maxfilesexceeded: function(file) {
            layer.alert('超最大数量,请删除现有文件后再上传', {icon: 2, title: '错误'});
            file.previewElement.remove();
        },
        sending: function(file,xhr,formData) {
            var $element = $(this.element);
            //图片尺寸
            formData.append("width", $element.data('width'));
            formData.append("height", $element.data('height'));
            //缩略图尺寸
            formData.append("thumbWidth", $element.data('thumbWidth'));
            formData.append("thumbHeight", $element.data('thumbHeight'));
        },
        success: function(file,response) {
            var $element = $(this.element);
            var thumbWidth = $element.data('thumbWidth');
            var thumbHeight = $element.data('thumbHeight');
            if (response.code) {
                //将图片id填入input
                var imageId = response.data.image_id;
                var imageUrl = ""+response.data.image_url;
                $('#' + $element.data('inputName')).val(imageId);
                var displayHtml = '<img src="'+imageUrl+'" style="border:1px solid #ccc;width:_thumbWidth_px;height:_thumbHeight_px;max-width:100%">';
                displayHtml = displayHtml.replace('_thumbWidth_', thumbWidth);
                displayHtml = displayHtml.replace('_thumbHeight_', thumbHeight);
                $element.find('.dz-message').html('').append(displayHtml);

                //判断是否进行裁剪
                if (response.msg == 'image_need_crop') {
                    var cropUrl = "{:url('admin/Image/upcrop')}";
                    layer.open({
                        type: 2,
                        title: '图片裁剪窗口',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['1172px', '650px'],
                        content: cropUrl + "?imageId=" + imageId + "&thumbWidth=" + $element.data('width') + "&thumbHeight=" + $element.data('height')
                    });
                }
            } else {
                layer.alert(response.msg, {icon: 2, title: '上传失败'});
            }
        },
        complete: function(file) {
            if (this.options.maxFiles == 1) {
                this.removeFile(file);
            }
        },
        error: function(file, message) {
            //上传错误
            layer.alert(message, {icon: 2, title: '上传失败'});
            //file.previewElement.remove();
            this.removeFile(file);
        }
    });

    //设定upcropper的函数，变量名固定不变
    var upcropper = {
        successCallback: function (res) {
            var url = res.data.image_url;
            $(".dz-message > img").attr("src", url);

            setTimeout(function () {
                layer.closeAll();
            }, 2000);
        }
    };
</script>
{/block}